<template>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="模型名称" prop="mid">
        <el-select style="width: 300px" v-model="form.mid" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in handleFilterModel(modelData)"
            :key="item.id"
            :label="item.modelName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务端口号" prop="svcPort">
        <el-input v-model="form.svcPort" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否已配置完成" prop="isConfig">
        <el-switch v-model="form.isConfig" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="服务模式" prop="svcScheme">
        <el-input v-model="form.svcScheme" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="服务地址" prop="svcPath">
        <el-input v-model="form.svcPath" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="模型类名" prop="modelClass">
        <el-input v-model="form.modelClass" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="服务器IP" prop="nid">
        <el-select v-model="form.nid" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in serverData"
            :key="item.id"
            :label="item.host"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="模型存放地址
"
        prop="modelPath"
      >
        <el-input v-model="form.modelPath" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item
        label="备注
"
        prop="back"
      >
        <el-input
          v-model="form.back"
          style="width: 440px"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder=""
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleClose()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  addResourceConfig,
  modifyResourceConfig,
  getResourceNodes
} from '@/services/modules/base-config'
import { getModelListNew } from '@/services/modules/home'
const props = defineProps({
  // 点击断面 水库的信息
  configList: {
    type: Array,
    default: () => []
  }
})
const form = reactive({
  id: undefined,
  mid: undefined,
  svcPort: undefined,
  isConfig: undefined,
  svcScheme: undefined,
  svcPath: undefined,
  modelClass: undefined,
  nid: undefined,
  modelPath: undefined,
  back: undefined
})
// 节点列表
const serverData = ref([])
// 模型列表
const modelData = ref([])
const dialogVisible = ref(false)
const rules = reactive({
  mid: [{ required: true, message: '请选择模型名称', trigger: 'change' }],
  svcPort: [{ required: true, message: '请输入服务端口号', trigger: 'blur' }],
  svcScheme: [{ required: true, message: '请输入服务模式', trigger: 'blur' }],
  svcPath: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
  modelClass: [{ required: true, message: '请输入模型类名', trigger: 'blur' }],
  nid: [{ required: true, message: '请选择服务器ip', trigger: 'change' }],
  modelPath: [{ required: true, message: '请输入模型存放地址', trigger: 'blur' }],
  back: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})
const dialogTitle = ref('')
const formRef = ref(null)
const emit = defineEmits(['handleGetList'])
const handleGetNodeList = () => {
  getResourceNodes({ host: '' }).then((res) => {
    if (res.code === 200) {
      serverData.value = res.data
    }
  })
}
// 将配置列表的存在的模型mid过滤出来 并将模型列表中已经存在此id的项去除（除配置中的mid外）
const handleFilterModel = (data) => {
  let mids = props.configList.map((e) => e.mid)
  if (form.id) {
    mids = mids.filter((a) => {
      return a != form.mid
    })
  }

  const newData = data.filter((e) => {
    if (!mids.includes(e.id)) {
      return e
    }
  })
  return newData
}
const handleGetModelList = () => {
  getModelListNew({ typeCode: '', modelName: '', pageNum: 1, pageSize: 10000 }).then((res) => {
    if (res.code === 200) {
      modelData.value = res.data.list
    }
  })
}

const handleOpenDialog = async (row) => {
  await handleGetNodeList()
  await handleGetModelList()
  dialogVisible.value = true
  if (formRef.value) {
    formRef.value.resetFields()
  }
  if (row.id) {
    dialogTitle.value = '修改服务信息'
    Object.keys(form).forEach((key) => {
      form[key] = row[key]
    })
  } else {
    dialogTitle.value = '添加服务信息'
    Object.keys(form).forEach((key) => {
      form[key] = undefined
    })
  }
}

const handleSubmit = async () => {
  await formRef.value.validate((valid) => {
    if (valid) {
      if (!form.id) {
        addResourceConfig(form).then((res) => {
          if (res.code === 200) {
            emit('handleGetList')
            handleClose()
          }
        })
      } else {
        modifyResourceConfig(form).then((res) => {
          if (res.code === 200) {
            emit('handleGetList')
            handleClose()
          }
        })
      }
    } else {
      ElMessage.error('请填写完整信息')
    }
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
defineExpose({ handleOpenDialog })
</script>
